<template>
  <div class="map-options-card" v-if="show">
    <div class="header">
      <span>地图选项</span>
      <a @click="handleClose"><CloseCircleOutlined class="bnClose" /></a>
    </div>
    <div class="body">
      <a-tree checkable defaultExpandAll v-model:checkedKeys="checkedKeys" @check="onCheck">
        <a-tree-node key="viewer" title="视窗选项"><a-tree-node key="viewerShadows" title="阴影效果" is-leaf /></a-tree-node>
        <a-tree-node key="imageryLayers" title="图层选项">
          <a-tree-node key="imageryLayersTileCoordinates" title="瓦片网格" is-leaf />
          <a-tree-node key="imageryLayersGrid" title="地理格网" is-leaf />
        </a-tree-node>
        <a-tree-node key="globe" title="地球选项">
          <a-tree-node key="globeShow" title="显示地球" is-leaf />
          <a-tree-node key="globeEnableLighting" title="阳光效果" is-leaf />
          <a-tree-node key="globeShowGroundAtmosphere" title="地表大气" is-leaf />
          <a-tree-node key="globeTranslucencyEnabled" title="地表透明" is-leaf />
          <a-tree-node key="globeDepthTestAgainstTerrain" title="深度检测" is-leaf />
          <a-tree-node key="globeWireFrame" title="地形线框" is-leaf />
        </a-tree-node>
        <a-tree-node key="scene" title="场景选项">
          <a-tree-node key="sceneSkyAtmosphereShow" title="天空大气" is-leaf />
          <a-tree-node key="sceneFogEnabled" title="显示雾气" is-leaf />
          <a-tree-node key="sceneRequestRenderMode" title="主动渲染" is-leaf />
          <a-tree-node key="sceneLogarithmicDepthBuffer" title="对数深度" is-leaf />
          <a-tree-node key="sceneDebugShowFramesPerSecond" title="码率帧数" is-leaf />
          <a-tree-node key="sceneDebugShowFrustumPlanes" title="显示视锥" is-leaf />
          <a-tree-node key="sceneEnableCollisionDetection" title="地下模式" is-leaf />
          <a-tree-node key="sceneBloomEnabled" title="泛光效果" is-leaf />
        </a-tree-node>
      </a-tree>
    </div>
  </div>
</template>

<script>
//参考：Cesium深入浅出之图层管理器
// https://blog.csdn.net/fywindmoon/article/details/113747843
import { DownOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
import * as Cesium from '@cesium/Source/Cesium.js';
// import MapOptionsViewModel from './MapOptionsViewModel.js';

export default defineComponent({
  components: { CloseCircleOutlined },
  setup() {
    return {};
  },
  props: {
    viewer: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: true,
      options: {},
      checkedKeys: []
    };
  },
  computed: {},
  watch: {
    viewer: {
      handler(val) {
        this.onViewerInited();
      },
      immediate: true
    },
    checkedKeys(arr) {
      console.log(arr);
    }
  },
  mounted() {
    this.onViewerInited();
  },
  beforeUnmount() {},
  methods: {
    onViewerInited() {
      this.initCheckedKeys();
    },
    initCheckedKeys() {
      const { viewer } = this;
      if (!viewer) return;
      const vm = this;
      const scene = viewer.scene;
      const globe = scene.globe;
      const canvas = scene.canvas;
      var imageryLayers = viewer.imageryLayers;

      function addAdditionalLayerOption(name, imageryProvider, alpha, show) {
        var layer = imageryLayers.addImageryProvider(imageryProvider);
        layer.alpha = Cesium.defaultValue(alpha, 0.5);
        layer.show = Cesium.defaultValue(show, true);
        layer.name = name;
        // Cesium.knockout.track(layer, ['alpha', 'show', 'name']);
        return layer
      }

      var $lyrTileCoordinates = null;
      var $lyrTileGrid = null;

      const options = {
        viewerShadows: val => {
          return val === undefined ? viewer.shadows : (viewer.shadows = val);
        },
        imageryLayersTileCoordinates: val => {
          if (val === undefined) {
            return $lyrTileCoordinates ? $lyrTileCoordinates.show : false;
          }else{
            if($lyrTileCoordinates){
              return $lyrTileCoordinates.show=val;
            }else{
              const imageryProvider = new Cesium.TileCoordinatesImageryProvider();
              $lyrTileCoordinates = addAdditionalLayerOption("瓦片网格", imageryProvider, 0.5, val)
            }
          }
        },
        imageryLayersGrid: val => {
          if (val === undefined) {
            return $lyrTileGrid ? $lyrTileGrid.show : false;
          }else{
            if($lyrTileGrid){
              return $lyrTileGrid.show=val;
            }else{
              const imageryProvider = new Cesium.GridImageryProvider();
              $lyrTileGrid = addAdditionalLayerOption("地理格网", imageryProvider, 0.5, val)
            }
          }
        },
        globeShow: val => {
          return val === undefined ? globe.show : (globe.show = val);
        },
        globeEnableLighting: val => {
          return val === undefined ? globe.enableLighting : (globe.enableLighting = val);
        },
        globeShowGroundAtmosphere: val => {
          return val === undefined ? globe.showGroundAtmosphere : (globe.showGroundAtmosphere = val);
        },
        globeTranslucencyEnabled: val => {
          return val === undefined ? globe.translucency.enabled : (globe.translucency.enabled = val);
        },
        globeDepthTestAgainstTerrain: val => {
          return val === undefined ? globe.depthTestAgainstTerrain : (globe.depthTestAgainstTerrain = val);
        },
        globeWireFrame: val => {
          return val === undefined ? globe._surface.tileProvider._debug.wireFrame : (globe._surface.tileProvider._debug.wireFrame = val);
        },
        sceneSkyAtmosphereShow: val => {
          return val === undefined ? scene.skyAtmosphere.show : (scene.skyAtmosphere.show = val);
        },
        sceneFogEnabled: val => {
          return val === undefined ? scene.fog.enabled : (scene.fog.enabled = val);
        },
        sceneRequestRenderMode: val => {
          return val === undefined ? scene.requestRenderMode : (scene.requestRenderMode = val);
        },
        sceneLogarithmicDepthBuffer: val => {
          return val === undefined ? scene.logarithmicDepthBuffer : (scene.logarithmicDepthBuffer = val);
        },
        sceneDebugShowFramesPerSecond: val => {
          return val === undefined ? scene.debugShowFramesPerSecond : (scene.debugShowFramesPerSecond = val);
        },
        sceneDebugShowFrustumPlanes: val => {
          return val === undefined ? scene.debugShowFrustumPlanes : (scene.debugShowFrustumPlanes = val);
        },
        sceneEnableCollisionDetection: val => {
          return val === undefined ? scene.enableCollisionDetection : (scene.enableCollisionDetection = val);
        },
        sceneBloomEnabled: val => {
          return val === undefined ? scene.postProcessStages.bloom.enabled : (scene.postProcessStages.bloom.enabled = val);
        }
      };

      console.log(options);

      this.options = options;

      const checkedKeys = [];
      const keys = Object.keys(options);
      keys.forEach(k => {
        const fn = options[k];
        fn() && checkedKeys.push(k);
      });
      this.checkedKeys = checkedKeys;
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys;

      const chkeys = {};
      checkedKeys.forEach(e => {
        chkeys[e] = true;
      });

      const { options } = this;
      const keys = Object.keys(options);
      keys.forEach(k => {
        const fn = options[k];
        fn(!!chkeys[k]);
      });
    },
    handleClose() {
      this.show = false;
    }
  }
});
</script>

<style scoped lang="less">
.map-options-card {
  position: absolute;
  top: 85px;
  left: 7px;
  width: 240px;
  line-height: 16px;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  z-index: 99;

  .header {
    padding: 5px 12px;
    line-height: 1.5em;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.4);

    display: flex;
    justify-content: space-between;
    align-items: center;

    .bnClose {
    }
  }
  .body {
    width: 100%;
    min-height: 5em;
    padding: 8px 16px 12px 6px;
    overflow: hidden;

    :deep(.ant-tree) {
      overflow: hidden;
      li {
        .ant-tree-node-content-wrapper {
          &:hover {
            background-color: rgba(0, 200, 255, 0.2);
          }
        }
        &.ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
          &:hover {
            background-color: transparent;
          }
        }
        .ant-tree-node-content-wrapper .ant-tree-title {
          color: white;
        }
        &.ant-tree-treenode-disabled .ant-tree-node-content-wrapper .ant-tree-title {
          color: gray;
        }
      }
    }
  }
}
</style>
